/* transition */
.transition1 {
  transition: all .1s linear;
}

.transition2 {
  transition: all .2s linear;
}

.transition3 {
  transition: all .3s linear;
}


.transition5 {
  transition: all .5s linear;
}

/* border */

.border-none {
  border: none !important;
}

.border01 {
  border: 1px $borderColor solid;
}

.border-t01 {
  border-top: 1px $borderColor solid;
}
.border-b01 {
  border-bottom: 1px $borderColor solid;
}

.border-l01 {
  border-left: 1px $borderColor solid;
}

.border-r01 {
  border-right: 1px $borderColor solid;
}

.border-left-blue2 {
  border-left: 2px $blue solid;
}

.border-left-blue4 {
  border-left: 4px $blue solid;
}

.dot {
  border-radius: 50%;
  &.dot8 {
    width: .5rem;
    height: .5rem;
  }
}

.radius {
  overflow: hidden;
}

.radius4 {
  border-radius: 4px;
}

.radius8 {
  border-radius: 8px;
}

.radius12 {
  border-radius: 12px;
}

.radius16 {
  border-radius: 16px;
}

.radiusP50 {
  border-radius: 50%;
}

.scroll-y {
  overflow-y: auto;
}


.z1{
  z-index: 1;
}
.z2{
  z-index: 2;
}
.z9{
  z-index: 9;
}

.mapMarkerView{
  position: fixed;
  transform: translate(-150px, -210px);
  .mmvArea{
    position: relative;
    width: 300px;
    height: 200px;
    padding: $dis10;
    border-radius: 4px;
    background-color: #fff;
    box-shadow: $dark3 0 0 1rem;
    &::after{
      content:"";
      left: 50%;
      top: 100%;
      position: absolute;
      width:1rem;
      height: 1rem;
      border-radius: 4px;
      transform: translate(-50%, -10px) rotate(45deg) ;
      background-color: #fff;
    }
  }
}

.NOSCROLLBAR {
  scrollbar-color: transparent transparent;
  scrollbar-track-color: transparent;
  -ms-scrollbar-track-color: transparent;
  width: calc(100% + 17px) !important;
}